<template>
  <div>
    <div class="rightWin1" v-if="visible">
      <span class="title"></span>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="单人条件" name="first">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="审批动作">
              <el-select v-model="value" placeholder="请选择" @change="selectChange">
                <el-option v-for="item in options" :key="item.key" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="自定义条件" name="third">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-tab-pane>
      </el-tabs>
      <footer class="footer">
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button type="primary" @click="visible = false">关闭</el-button>
      </footer>
    </div>
  </div>
</template>

<script>

export default {
  name: 'sequenceFlow',
  data() {
    return {
      options: [
        {
          key: '0',
          value: { xsiType: "tFormalExpression", value: "<![CDATA[${pass}]]>" },
          label: '同意'
        },
        {
          key: '1',
          value: { xsiType: "tFormalExpression", value: "<![CDATA[${!pass}]]>" },
          label: '不同意'
        }],
      value: { xsiType: "tFormalExpression", value: "<![CDATA[${!pass}]]>" },
      visible: false,
      bool: true,
      node: {},
      label: '',
      input: '',
      candidateGroups: '',
      assignee: '',
      activeName: 'first',
      propOpsValue: ''
    }
  },
  mounted() {

  },
  methods: {
    handleClick(tab, event) {
      console.log('sequenceFlow tab', tab, event);
    },
    init(item) {
      this.node = item
      this.label = item.item.data.label
      this.activeName = this.node.item.data.activeName
      if(this.activeName == '' || this.activeName == undefined) {
        this.activeName = 'first'
      }
      if(this.activeName == 'first') {
        this.setSingleDefault()
      } else if(this.activeName == 'third') {
        this.setCustomDefault()
      }
    },
    setSingleDefault(){
      this.value = this.node.item.data.conditionExpression
    },
    setCustomDefault(){
      this.input = this.node.item.data.input
      console.log('data ',this.node.item.data)
    },
    selectChange(value) {
      console.log("sequence flow select value is ", value)
    },
    singleOps(node) {
      console.log("sequenceflow data", this.value)
      let obj = this.options.find(i => {
        return i.value.value === this.value.value
      })
      console.log('obj is ', obj)
      node.setLabels([{
        attrs: {
          text: {
            text: obj.label,
          },
        },
      }])
      node.setData(Object.assign({}, this.node.item.data, { conditionExpression: this.value,activeName: this.activeName}))
    },
    customOps(node) {
      let value = { xsiType: "tFormalExpression", value: "<![CDATA[${" + this.input + "}]]>" }
      node.setLabels({
        attrs: {
          text: {
            text: "自定义",
          },
        },
      })
      node.setData(Object.assign({}, this.node.item.data, { conditionExpression: value,activeName: this.activeName,input: this.input }))
    },
    submit() {
      var node = this.$parent.getNodeById(this.node.item.id)
      if (this.activeName == 'first') {
        this.singleOps(node);
      } else if (this.activeName == 'third') {
        this.customOps(node)
      } else if (this.activeName == 'second') {

      }
      this.visible = false
    }
  }
}
</script>
<style scoped>
.rightWin1 {
  overflow-y: scroll;
}

.rightWin1 {
  background-color: white;
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  padding: 0 12px;
  width: 300px;
}

.title {
  font-size: 20px;
  margin-top: 10px;
  margin-left: 10px;
}

.footer {
  margin-top: 50px;
  text-align: center;
}

.demo-form-inline {
  margin-left: 10px;
}
</style>
